<!-- 
* 卡牌选择页面 
* 2019年5月16日17:06:10
* penglei
* -->
<template>
    <view class="content">
        <image class="_bg" src="../../static/img/bg3.png" mode="aspectFill"></image>
		<view class="_label_top">
			<image class="_btn_top" src="../../static/img/kjg.png"></image>
			<label class="_lab_top">
				<label class="label-top-one">请从</label>
				<label  class="label-top-two">{{text}}</label>
				<label  class="label-top-three">中选中一个数字</label>
			</label>
			
		</view>
		<m-next-card 
		@tapResult="tapRes" 
		@tapNext='tapNext' 
		@tapNextSelect='tapNextSelect'
		@tapSelect='tapSelect'
		:currindex="currindex" 
		:current="current"
		:middleTitle="middleTitle"
		:middlePage="middlePage"
		:middleTost="middleTost"
		:itemSelect='itemSelect'
		:select="select"
		:cardList0="getCardList1"
		:cardList1="getCardList1"
		:cardList2="getCardList2"/>
		<cmd-bottom-nav @click="tapNav"  border-color="#BC1BBE" background-color="#BC1BBE" font-color="#fff" active-font-color="#fff" current="1"></cmd-bottom-nav>
    </view>
</template>

<script>
	import cmdBottomNav from "@/components/cmd-bottom-nav/cmd-bottom-nav.vue"
	import mbtn from "@/components/m-btn-type/m-btn.vue"
	import mtabbar from "@/components/m-tabbar/m-tabbar.vue"
	import mCard from "@/components/m-card/m-card.vue"
	import mBtnCs from '@/components/m-btn/m-btn-cs.vue'
	import mNextCard from '@/components/m-next-card/m-next-card.vue'
	import util from '../../static/js/util.js'
	import comm from '../../common/helpers.js'
    export default {
		components:{mbtn,mtabbar,cmdBottomNav,mBtnCs,mCard,mNextCard},
		data(){
			return{
				text:'请从1-5里选择一个数字',
				middleTitle:'过去的状况',
				middlePage:'/3',
				middleTost:'摒弃杂念选择一个数字',
				currindex:1,
				current:1,
				btnText:'确定',
				itemList:'',
				itemSelect:[],
				preRes:'',
				itemRes:[],
				isnext:true,
				select:-1
			}
		},
        onLoad(event) {
			// console.log(event.res)
        },
		methods:{
			tapNav(e){
				let that = this
				let path = e.item.pagePath
				uni.switchTab({
					url:path,
					success: (res) => {
					},
					complete: (com) => {
					}
				})
			},
			tapRes(){
				// 最后一步的数字
				let that = this
				//进入先将选中卡牌索引+一后追加到列表
				that.itemList += (this.itemSelect.select+1)
				uni.setStorageSync(this.current+"",this.itemList+"")
				//将用户选择的卡牌组合存入数组
				let r1 = uni.getStorageSync('1')
				let r2 = uni.getStorageSync('2')
				let r3 = uni.getStorageSync('3')
				let data = {
					'r1':r1,
					'r2':r2,
					'r3':r3,
					'mid':uni.getStorageSync('openid'),
					'model':uni.getStorageSync('type'),
					'rule': uni.getStorageSync('rule')
				}
				
				util.getRequest(comm.websiteUrl+'?s=v1/setgroup/','POST',data)
				util.tapNav('/pages/card/main_card_res')
			},
			tapSelect(e){
				this.itemSelect = e
			},
			tapNext(e){
				if(this.itemSelect.select==undefined){
					uni.showToast({
						title: '请至少选中一个卡牌',
						duration: 500
					});
					return false;
				}
				this.currindex++
				//进入先将选中卡牌索引+一后追加到列表
				this.itemList += (this.itemSelect.select+1)
				this.itemSelect = []
				// console.log(this.itemList)
				if(this.currindex==1){
					this.text = '1-5'
				}
				if(this.currindex < 3){
					this.btnText = "确定"
				}
				if(this.currindex == 3) this.btnText = '下一步'
			},
			tapNextSelect(e){
				let that = this
				if(this.itemSelect.select==undefined){
					uni.showToast({
						title: '请至少选中一个卡牌',
						duration: 500
					});
					return false;
				}
				//进入先将选中卡牌索引+一后追加到列表
				this.itemList += (this.itemSelect.select+1)
				//将每轮数据存入本地存储，最后结束时取出
				//存入本地缓存时，判断该组数字是否已经存在
				for (var i = 0; i < this.itemRes.length; i++) {
					this.isnext= (this.itemRes[i] == that.itemList)
					if(this.isnext){
						uni.showToast({
							title: '不要选择相同的数字组合',
							duration: 2000
						});
						// this.itemRes.splice(i,1)
						this.currindex = 1
						this.itemList=''
						this.isnext = true
						return false;
					}
				}
				
				uni.setStorageSync(this.current+"",this.itemList+"")
				if(this.current == 1){
					this.middleTitle = '现在的状况'
				}
				if(this.current == 2){
					this.middleTitle = '未来的状况'
				}
				this.currindex = 1
				this.itemRes.push(that.itemList)
				// 恢复到第一步
				if(this.currindex==1){
					this.text = '1-5'
				}
				// if(bool == false){
				this.itemSelect = []
				this.current> 3 ? 3:this.current++
				// }
				this.itemList=''
			}
		},
		computed:{
			getCardList0(){
				let list = []
				if(this.itemList===''){
					list = comm.cardList0
					this.text = '1-5'
				}
				list = comm.cardList0
				this.itemSelect = []
				return list
			},
			getCardList1(){
				let list = []
				if(this.itemList===''){
					list = comm.cardList0
					this.text = '1-5'
				}else if(this.itemList==='1'){
					list = comm.cardList4
					this.text = '1-3'
				}else{
					list = comm.cardList1
					this.text = '1-2'
				}
				this.itemSelect = []
				return list
			},
			getCardList2(){
				let list = []
				if( this.itemList==='12' 
					|| this.itemList==='11'
					|| this.itemList==='22'
					|| this.itemList==='32'
					|| this.itemList==='42'
					|| this.itemList==='52'){
					list = comm.cardList2
					this.text = '1-10'
				}else if(this.itemList==='21' 
						|| this.itemList==='31'
						|| this.itemList==='41'
						|| this.itemList==='51'){
					list = comm.cardList3
					this.text = '1-4'
				}else  if( this.itemList==='13'){
					list = comm.cardList4
					this.text = '1-3'
				}
				this.itemSelect = []
				return list
			}
		}
		
    }
</script>

<style lang="scss">
	.content{
		padding: 0upx;
		height:100%;
		
		
		._bg{
			width: 100%;
			height:100%;
			vertical-align: top;
			top: 0;
			right: 0;
			position:absolute;
			vertical-align: middle;
		}
		
		._label_top{
			display:flex;
			width:100%;
			top:25upx;
			height:auto;
			position:relative;
			justify-content:center;

			._btn_top{
				height:185upx;
				width: 50%;
			}
			
			._lab_top{
				z-index:3;
				color:white;
				width:30%;
				text-align:center;
				justify-content:center;
				align-items:center;
				position:absolute;
				display:flex;
				margin:auto;
				height:100%;
				
				
				.label-top-one,
				.label-top-two,
				.label-top-three{
					display:flex;
					float:left;
					width:265upx;
					position:absolute;
					justify-content:center;
				}
				
				.label-top-two{
					color: red;
					font-weight: bold;
					font-size: 16pt;
				}
				
				.label-top-one{
					margin-top: -45upx;
				}
				
				.label-top-three{
					margin-top: 40upx;
				}
				
				
			}
		}
		
		._bg_middle{
			width:100%;
			height:20%;
			position:absolute;
			z-index:7;
			margin:auto;
			justify-content:center;
			vertical-align:middle;
			align-items:center;
			display:flex;
			margin-top:125rpx;
			color: white;
			
			._middle_title{
				font-size:13pt;
				width:100%;
				position:absolute;
				margin-top:1rpx;
				text-align:center;
			}
			._middle_page{
				width:100%;
				position:absolute;
				font-size:9pt;
				margin-top:40rpx;
				text-align:center;
			}
			._middle_tost{
				width:100%;
				position:absolute;
				font-size:8pt;
				margin-top:80rpx;
				text-align:center;
				display:inline-block;
			}
			
			m-card{
				width:100%;
			}
		}
	}
</style>
